<template>
	<view>

		<view class=" " style="text-align: center;">
			<view class="top_tleqw">
				<view class="top_tilte">{{moeny}}<span style="font-size: 24rpx;">元</span></view>
			</view>
			<view class="top_cont">为更好的保障服务质量，需先行支付订单才会生效</view>
		</view>


		<view class="xia_box">
			<view class="xia_flx" style="margin-top: 30rpx;padding-top: 30rpx;" @click="cont=1">
				<view class="" style="display: flex;">
					<image src="@/static/png/zhifubao.png" mode="aspectFill" style="width: 38rpx;height: 38rpx;">
					</image>
					<view style="font-size: 28rpx;margin-left: 15rpx;">支付宝</view>
				</view>
				<view class="xia_quan"  v-if="cont!=1"></view>
				<image src="@/static/png/xuanzhong.png" v-if="cont==1" mode="aspectFill"
					style="width: 39rpx;height: 39rpx;"></image>
			</view>
			<view class="xia_flx" style="margin-top: 30rpx;"  @click="cont=2">
				<view class="" style="display: flex;">
					<image src="@/static/png/weixin.png" mode="aspectFill" style="width: 38rpx;height: 38rpx;"></image>
					<view style="font-size: 28rpx;margin-left: 15rpx;">微信</view>
				</view>
				<view class="xia_quan" v-if="cont!=2"></view>
				<image src="@/static/png/xuanzhong.png" v-if="cont==2" mode="aspectFill"
					style="width: 39rpx;height: 39rpx;"></image>
			</view>
			<view class="xia_flx" style="margin-top: 30rpx;" @click="cont=3">
				<view class="" style="display: flex;">
					<image src="@/static/png/yun.png" mode="aspectFill" style="width: 38rpx;height: 38rpx;"></image>
					<view style="font-size: 28rpx;margin-left: 15rpx;">云闪付</view>
				</view>
				<view class="xia_quan"  v-if="cont!=3"></view>
				<image src="@/static/png/xuanzhong.png" v-if="cont==3" mode="aspectFill"
					style="width: 39rpx;height: 39rpx;"></image>
			</view>
		</view>
		<view class="xiamxca">
			<!-- <view class="top_cont" style="margin-bottom: 40rpx;">若订单取消，退款实时返回(特殊情况1-2日到账)</view> -->
			<view class="liji1" @click="queding">{{cont==1?'支付宝':(cont==2 ? '微信':'云闪付')}}支付￥{{moeny}}</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				cont: 1,
				orderId: '',
				moeny: ''
			}
		},
		watch: {
			cont(e) {
				let data = {
					paymentType: e
				}
				this.changeOder(data)
			}
		},
		onLoad(e) {
			this.orderId = e.id
			this.moeny = e.moeny
		},
		methods: {
			async queding() {
				let res = await this.$http.order.payment({
					orderId: this.orderId
				})
				
				if (res.data.code == 200) {
					uni.showToast({
						title: '支付成功',
						icon: 'none',
						success() {
							setTimeout(()=>{
								uni.switchTab({
									url:'/pages/order/order'
								})
							},1000)
							
						}
					})
				}
			}
		},
		computed: {
			...mapState({
				order: state => state.order.order,
			})
		},
	}
</script>

<style>
	.xiamxca {
		text-align: center;
		position: fixed;
		bottom: 2%;
		left: 8%;
	}

	.xia_flx {
		display: flex;
		justify-content: space-between;
		width: 90%;
		margin-left: 5%;
		padding-top: 20rpx;
	}

	.liji1 {
		width: 630rpx;
		height: 104rpx;
		text-align: center;
		line-height: 104rpx;
		background-color: #02A7F0;
		border-radius: 10rpx;
		color: #fff;
		font-size: 28rpx;
		margin: 0 auto;
	}

	.xia_quan {
		width: 36rpx;
		height: 36rpx;
		border: 1rpx solid #949494;
		border-radius: 100%;
	}

	.top_tleqw {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 110rpx;
	}

	.xia_box {
		width: 710rpx;
		height: 320rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-left: 20rpx;
		margin-top: 90rpx;
	}

	.top_tilte {
		font-size: 68rpx;
		font-weight: 600;
	}

	.top_cont {
		color: #999999;
		font-size: 26rpx;

	}
</style>